<template>
    <h-section collapse title="业务需求">
        <div :class="['workbench-require-card-item', 'disabled-item']" v-for="item of list" :key="item.id" style="background: #fff">
            <flexbox align="flex-start">
                <div style="flex: 1; overflow: hidden">
                    <flexbox justify="space-between">
                        <flexbox style="flex: 1; margin-left: 20px; overflow: hidden">
                            <flexbox style="flex: 1; overflow: hidden">
                                <HToolTip :title="item.requireName">
                                    <span style="color: #172b4d; margin-left: 4px">{{ systemName }}</span>
                                </HToolTip>
                                <span class="margin-l-8 primary-color">{{ item.requestNumber }}</span>
                            </flexbox>
                            <a-tag :color="getStatusColor(item.realSsStatus)" v-if="item.realSsStatus">{{ item.realSsStatus }}</a-tag>
                            <div class="versionNumber-tag-wrap" v-if="item.versionNumbers && item.versionNumbers.length">
                                <a-tag v-for="elem of item.versionNumbers" :key="elem">{{ elem }}</a-tag>
                            </div>
                        </flexbox>

                        <a-tag v-if="item.repairVersion">
                            {{ item.repairVersion }}
                        </a-tag>
                    </flexbox>
                    <flexbox jusitfy="space-between" style="overflow: hidden">
                        <HToolTip :title="item.requireName">
                            <span style="color: #172b4d; margin-left: 24px">{{ item.requestName }}</span>
                        </HToolTip>
                    </flexbox>
                </div>
            </flexbox>
        </div>
    </h-section>
</template>

<script lang="ts">
import { HToolTip } from '@/components';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HToolTip
    },
    props: {
        list: {
            type: Array,
            default: () => []
        },
        versionDetail: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: Boolean,
            default: false
        },
        systemName: {
            type: String,
            default: ''
        }
    },
    emits: ['success'],
    setup() {
        const state = reactive<any>({});

        const getStatusColor = (status) => {
            switch (status) {
                case '已移除':
                    return '#db1c0b';
                case '进行中':
                    return '#0176d3';
                case '已上线':
                    return '#26a971';
                case '需求变动':
                    return '#FE9339';
                case '新增':
                    return 'rgb(58 55 193)';
            }
        };

        return {
            ...toRefs(state),
            getStatusColor
        };
    }
});
</script>

<style scoped lang="less">
@import './styles/common.less';
::v-deep(.ant-badge-status-text) {
    margin-left: 0 !important;
}
.versionNumber-tag-wrap {
    ::v-deep(.ant-tag) {
        background: #fff !important;
        border: 1px solid #000 !important;
    }
}
</style>